<script lang="ts" setup name="SmartMediaMaterialManager">
import { listMediaBasicInfos } from '@/api/creative/smart-media/media-manager'
import { formatDate } from '@/utils/formatTime'
import UploadFile from '../components/upload-file.vue'

const loading = ref(false)
const total = ref(0)
const queryParams = reactive({
  pageNo: 1,
  pageSize: 10,
  status: '',
  mediaType: ''
})
const queryFormRef = ref()

const mediaList = ref<any[]>([])

const getList = async () => {
  loading.value = true
  const data = await listMediaBasicInfos({
    ...queryParams
  })
  console.log('🚀 ~ file: index.vue:25 ~ getList ~ data:', data)
  mediaList.value = data.mediaInfos.map((mediaInfo) => {
    const {
      mediaId,
      mediaBasicInfo: {
        inputURL,
        mediaType,
        coverURL,
        title,
        description,
        status,
        createTime,
        modifiedTime
      }
    } = mediaInfo

    return {
      mediaId,
      mediaType,
      coverURL,
      title,
      inputURL,
      description,
      status,
      createTime,
      modifiedTime
    }
  })
  total.value = data.totalCount
  loading.value = false
}

const mediaTypeMap = {
  video: '视频',
  audio: '音频',
  image: '图片'
}

const statusMap = {
  Normal: '正常',
  Init: '未就绪',
  Preparing: '合成中',
  PrepareFail: '合成失败'
}

const handleQuery = () => {
  queryParams.pageNo = 1
  getList()
}

const resetQuery = () => {
  queryFormRef.value?.resetFields()
  getList()
}

const handleDelete = () => {}

/** 上传文件 */
const uploadFileRef = ref()
const handleUploadFileClick = () => {
  uploadFileRef.value?.open()
}

/** 预览 */
const videoPreviewVisible = ref(false)
const currentPreview = reactive({
  mediaType: '',
  mediaUrl: ''
})
const handlePreview = ({ mediaType, coverURL, inputURL }) => {
  currentPreview.mediaType = mediaType
  currentPreview.mediaUrl = inputURL || coverURL
  videoPreviewVisible.value = true
}
const beforeClose = () => {
  currentPreview.mediaUrl = ''
  videoPreviewVisible.value = false
}

onMounted(() => {
  getList()
})
</script>

<template>
  <ContentWrap>
    <!-- 搜索工作栏 -->
    <el-form
      class="-mb-15px"
      :model="queryParams"
      ref="queryFormRef"
      :inline="true"
      label-width="68px"
    >
      <el-form-item label="项目状态" prop="status">
        <el-select
          v-model="queryParams.status"
          placeholder="请选择项目状态"
          clearable
          class="!w-240px"
        >
          <el-option label="全部" value="" />
          <el-option
            v-for="key in Object.keys(statusMap)"
            :key="key"
            :label="statusMap[key]"
            :value="key"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="文件类型" prop="mediaType">
        <el-select
          v-model="queryParams.mediaType"
          placeholder="请选择文件类型"
          clearable
          class="!w-240px"
        >
          <el-option label="全部" value="" />
          <el-option
            v-for="key in Object.keys(mediaTypeMap)"
            :key="key"
            :label="mediaTypeMap[key]"
            :value="key"
          />
        </el-select>
      </el-form-item>
      <!-- 按钮 -->
      <el-form-item>
        <el-button @click="handleQuery"><Icon icon="ep:search" class="mr-5px" /> 搜索</el-button>
        <el-button @click="resetQuery"><Icon icon="ep:refresh" class="mr-5px" /> 重置</el-button>
        <el-button
          type="primary"
          plain
          @click="handleUploadFileClick"
          v-hasPermi="['system:service:create']"
        >
          <Icon icon="ep:plus" class="mr-5px" /> 上传素材
        </el-button>
      </el-form-item>
    </el-form>
  </ContentWrap>

  <ContentWrap>
    <el-table v-loading="loading" :data="mediaList">
      <!-- <el-table-column label="mediaId" align="center" prop="mediaId" /> -->
      <el-table-column label="标题" align="center" prop="title" />
      <el-table-column label="描述" align="center">
        <template #default="scope">
          <el-tooltip :content="scope.row.description || '无'" placement="top">
            <span class="truncate">{{ scope.row.description || '无' }}</span>
          </el-tooltip>
        </template>
      </el-table-column>
      <el-table-column label="封面" align="center">
        <template #default="scope">
          <el-image class="w-15" :src="scope.row.coverURL || scope.row.inputURL" alt="" />
        </template>
      </el-table-column>
      <el-table-column label="类型" align="center">
        <template #default="scope">
          <span>{{ mediaTypeMap[scope.row.mediaType] }}</span>
        </template>
      </el-table-column>
      <el-table-column label="创建时间" align="center">
        <template #default="scope">
          <span>{{ formatDate(scope.row.createTime) }}</span>
        </template>
      </el-table-column>
      <el-table-column label="修改时间" align="center">
        <template #default="scope">
          <span>{{ formatDate(scope.row.modifiedTime) }}</span>
        </template>
      </el-table-column>
      <el-table-column label="状态" align="center">
        <template #default="scope">
          <span>{{ statusMap[scope.row.status] }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center">
        <template #default="scope">
          <el-button
            link
            type="primary"
            @click="handlePreview(scope.row)"
            v-hasPermi="['system:media-manager:query']"
          >
            预览
          </el-button>
          <el-button
            link
            type="danger"
            @click="handleDelete(scope.row.projectId)"
            v-hasPermi="['system:media-manager:query']"
          >
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <Pagination
      :total="total"
      v-model:page="queryParams.pageNo"
      v-model:limit="queryParams.pageSize"
      @pagination="getList"
    />
  </ContentWrap>

  <UploadFile ref="uploadFileRef" />

  <!-- 预览弹窗 -->
  <el-dialog
    title="预览"
    v-model="videoPreviewVisible"
    close-on-click-modal
    close-on-press-escape
    width="50%"
    draggable
    :before-close="beforeClose"
  >
    <div v-if="currentPreview.mediaUrl" class="flex justify-center">
      <video v-if="currentPreview.mediaType === 'video'" class="h-96" controls autoplay>
        <source :src="currentPreview.mediaUrl" type="video/mp4" />
      </video>
      <el-image v-else class="h-96" :src="currentPreview.mediaUrl" fit="contain" />
    </div>
  </el-dialog>
</template>

<style scoped></style>
